<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
      <el-form labelWidth="150px">
        <el-form-item label="出车用途" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="carplanlist.usedetail"></el-input>
          <div class="el-form-item__error" v-if="!$v.carplanlist.usedetail.required">
            请输入出车用途
          </div>
        </el-form-item>
        <el-form-item label="司机" class="is-required">
          <searchperson @getpersonid="getpersonid" :itempersonid="carplanlist.holder"></searchperson>
          <div class="el-form-item__error" v-if="!$v.carplanlist.holder.required">
            请选择司机
          </div>
        </el-form-item>
        <el-form-item label="牌照" class="is-required">
          <selectcarnumber
            @getpersonid2="getpersonid2"
            :itempersonid="carplanlist.carid"
            :itemtype="2"
          ></selectcarnumber>
          <div class="el-form-item__error" v-if="!$v.carplanlist.carid.required">
            请选择牌照
          </div>
        </el-form-item>
        <el-form-item label="行车地点" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="carplanlist.address"></el-input>
          <div class="el-form-item__error" v-if="!$v.carplanlist.address.required">
            请输入行车地点
          </div>
        </el-form-item>
        <el-form-item label="出行时间" class="is-required">

          <el-date-picker
            v-model="plantimedate"
            type="datetimerange"
            rangeSeparator="至"
            style="width:100%"
            valueFormat="yyyy-MM-dd HH:mm:ss"
            startPlaceholder="开始日期"
            endPlaceholder="结束日期"
          >
          </el-date-picker>
          <div class="el-form-item__error" v-if="plantimedate==null||plantimedate[0]==''">
            请选择出行时间
          </div>
        </el-form-item>
        <el-form-item label="">
          <span>&nbsp;</span>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="goaddplan">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchperson from '~/components/common/searchperson.vue';
import selectcarnumber from '~/components/common/selectcarnumber.vue';
import { required } from 'vuelidate/lib/validators';

export default {
  validations: {
    carplanlist: {
      usedetail: {
        required,
      },
      holder: {
        required,
      },
      carid: {
        required,
      },
      address: {
        required,
      },
    },
  },
  components: {
    searchperson,
    selectcarnumber,
  },
  props: {
    chouseval: Array,
    chousebtn: Number,
  },
  data() {
    return {
      title: '添加出车计划',
      dialogVisible: true,
      ts: this.newStore(),
      plantime: '',
      carplanlist: { carid: '', carno: '', holder: '' },
      plantimedate: ['', ''],
    };
  },
  created() {
    this.getitemval();
    if (this.chousebtn == 2) {
      this.title = '修改出车计划';
    }
  },
  methods: {
    // 编辑渲染信息
    getitemval() {
      if (this.chouseval.length > 0 && this.chousebtn == 2) {
        let b = {};
        this.chouseval.forEach((item) => {
          b = item;
        });
        this.carplanlist = Object.assign({}, b.hash);
        this.plantimedate[0] = this.carplanlist.plantime;
        this.plantimedate[1] = this.carplanlist.recordtime_end;
      }
    },
    // 获取司机
    getpersonid(val) {
      this.carplanlist.holder = val.id;
    },
    // 获取车辆编号
    getpersonid2(val) {
      console.log(val);

      this.carplanlist.carid = val.id2;
      this.carplanlist.carno = val.id;
    },
    // 增加/修改出车计划
    goaddplan() {
      if (this.plantimedate == null) {
        this.plantimedate = ['', ''];
      }
      if (this.plantimedate[0] == '') {
        this.$message({
          type: 'error',
          message: ' 请选择出行时间',
        });
        return;
      }
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else if (this.chousebtn == 1) {
        this.$confirm('是否添加出车计划?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const req = {
            handle: '0E56125B90D2898A4A3BF7F51B00739F7E3D05C476FEFFCD',
            carid: this.carplanlist.carid,
            plandate: this.carplanlist.plandate,
            plantime: this.plantimedate[0],
            recordtime_end: this.plantimedate[1],
            address: this.carplanlist.address,
            usedetail: this.carplanlist.usedetail,
            holder: this.carplanlist.holder,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            if (ts.d.sflag == 'success') {
              this.$message({
                type: 'success',
                message: '添加成功!',
              });
              this.dialogVisible = false;
              // console.log(this.carplanlist, "wsdfs");

              this.$emit('update:carplanlists', this.carplanlist);
            }
          });
        });
      } else if (this.chousebtn == 2) {
        this.$confirm('是否修改出车计划?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const req = {
            handle: '0E56125B90D2898A7B4BD3DD834486574BDB88EF3CCA539F',
            planid: this.carplanlist.planid,
            carid: this.carplanlist.carid,
            plandate: this.carplanlist.plandate,
            plantime: this.plantimedate[0],
            recordtime_end: this.plantimedate[1],
            address: this.carplanlist.address,
            usedetail: this.carplanlist.usedetail,
            holder: this.carplanlist.holder,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            if (ts.d.sflag == 'success') {
              this.$message({
                type: 'success',
                message: '修改成功!',
              });
              this.dialogVisible = false;
              // console.log(this.carplanlist, "wsdfs");

              this.$emit('update:carplanlists', this.carplanlist);
            }
          });
        });
      }
    },
  },
};
</script>


<style scoped>
.el-form-item {
  width: 50%;
  margin-bottom: 22px;
  float: left;
}
.statusspan {
  display: inline-block;
  width: 30px;
  height: 30px;
}
</style>
